<template>
    <div id="MyIndex-Middle">
        <div id="MyIndex-Middle-Content">
            <div class="Top">
                <img src="img/My/My.png" alt="">
                <p class="p1">
                    <span class="s1">编辑资料</span>
                    <span class="s2">
                        <i class="iconfont icon-saoyisaoerweima"></i>
                    </span>
                </p>
                <div>
                    <h2>饕餮</h2>
                    <p>
                        <span>0</span>&nbsp;关注我的人
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span>1</span>&nbsp;我关注的人
                    </p>
                </div>
            </div>
            <div class="middle">
              <p>
                    <span>
                    个人认证
                </span>

                  <i class="iconfont icon-ziyuan"></i>
              </p>
              <p>
                    <span>
                        <i class="iconfont icon-huizhang ss"></i>
                    我的徽章
                </span>
                  <em>
                      <em class="dd">1枚徽章待领取</em>
                      <i class="iconfont icon-ziyuan"></i>
                  </em>

              </p>
                <div>
                    <h2>完善我的知乎形象，获取更多关注</h2>
                    <span>+ 添加形象关键词</span>
                </div>
            </div>
        </div>
        <MyIndexMiddleChildNav></MyIndexMiddleChildNav>
    </div>
</template>

<script>
    import MyIndexMiddleChildNav from 'com/My/MyIndex/MyIndex-Middle-ChildNav.vue'
    export default {
        name: "MyIndex-Nav",
        components:{
            MyIndexMiddleChildNav
        }
    }
</script>

<style lang="scss" scoped>
    #MyIndex-Middle{
        background-color: #FFFFFF;
        position: relative;
    }

    #MyIndex-Middle-Content{
        padding: 0 0.16rem;
        .Top{
            height: 1.4rem;
            img{
                width: 1rem;
                /*display: block;*/
                position: absolute;
                transform: translateY(-50%);
                border-radius: 50%;
                border: 0.04rem solid #FFFFFF;
            }

            .p1{
                padding: 0.17rem 0 0.14rem;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .s1{
                    width: 1.02rem;
                    height: 0.34rem;
                    display: inline-block;
                    background-color: #0072fd;
                    border-radius: 0.16rem;
                    font-size: 0.16rem;
                    color: #fbf8f6;
                    text-align: center;
                    line-height: 0.34rem;
                }
                .s2{
                    display: inline-block;
                    width: 0.32rem;
                    height: 0.32rem;
                    border-radius: 50%;
                    background-color: #747a8e;
                    margin-left: 0.1rem;
                    text-align: center;

                    i{
                        font-size: 0.16rem;
                        color: #fbf8f6;
                        line-height: 0.34rem;
                    }
                }
            }

            div{
                height: 0.8rem;
                border-bottom: 0.02rem solid #f3f3f3;

                h2{
                    font-size: 0.22rem;
                    line-height: 0.22rem;
                }

                p{
                    font-size: 0.13rem;
                    line-height: 0.13rem;
                    color: #848484;
                    margin-top: 0.2rem;

                    span{
                        font-size: 0.16rem;
                        color: #0057fa;
                        line-height: 0.16rem;
                    }
                }
            }
        }

        .middle{
            p{
                width: 100%;
                height: 0.51rem;
                border-bottom: 0.02rem solid #f3f3f3;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .ss{
                    font-size: 0.16rem;
                    color: #0067f3;
                }
                .dd{
                    font-size: 0.13rem;
                    color: #4d4d4d;
                    font-style: normal;
                    margin-right: 0.1rem;
                }
            ;
            }

            span{
                font-size: 0.15rem;
                color: #111111;
            }
            i{
                font-size: 0.09rem;
                color: #b6b6b6;
                margin-right: 0.05rem;
            }

            div{
                height: 1.5rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                h2{
                    font-size: 0.14rem;
                    color: #090909;
                    margin-bottom: 0.09rem;
                }

                span{
                    display: block;
                    width: 1.38rem;
                    height: 0.32rem;
                    border: 0.02rem solid #379ae8;
                    border-radius: 0.12rem;
                    text-align: center;
                    line-height: 0.32rem;
                    font-size: 0.13rem;
                    color: #0077f1;
                }
            }

        }


    }
</style>